CSS 样式规则

CSS 有效性

使用有效的 CSS。

使用有效的 CSS 是可测量的基准质量，可确保 CSS 的合理使用并有助于识别可删除的无效 CSS 代码。

ID 和类名称

使用有意义或具有普遍性的 ID 和类名称。

不可使用意义含糊的 ID 和类名称，使用能够反映相应元素意义的名称或具有普遍性的通用名。

最好使用能够反映相应元素意义的具体名称，因为这些名称最易于理解且不易变更。

具有普遍性的通用名被用于与类似元素意义相仿的元素，主要起辅助作用。

不推荐：

  1. .p-998 { 
  2.     … 
  3. } 
  5. .btn-green { 
  6.     … 
  7. }

推荐：

  1. .gallery { 
  2.     …
  3. } 
  5. .btn-default { 
  6.     … 
  7. }

类型选择符

避免用类型选择器限定 ID 和类名称。

除非情况需要（例如，在辅助类型中），否则不要将元素名和 ID 或类名称同时使用。为提高性能，避免使用不必要的祖先选择符。

在 CSS 文件中使用 ID 也是较糟糕的做法，类别始终比名称更具优势，如果你需要给予某元素一个特殊的名称，请使用类别。（ ID 的唯一优点是在存在数千个类似元素的页面上能保持较快的运行速度。）

不推荐：

  1. ul# example { 
  2.     … 
  3. } 
  5. div.error { 
  6.     … 
  7. }

推荐：

  1. .example { 
  2.     … 
  3. } 
  5. .error { 
  6.     … 
  7. }

简写属性

应使用简写。

CSS 可提供多种简写属性（例如，padding，而不是 padding-top、padding-bottom 等），应尽可能使用这些简写，但字体属性和在 Bootstrap 等框架中会覆盖其他同名属性的属性除外。

使用简写属性有助于提高代码的效率和易懂性。推荐在设置仅与字体 font 相关的属性时使用字体简写属性，但无需在进行小幅改动时使用。在使用字体简写属性时，请注意，如果未注明字体的大小和系列，浏览器会忽略整个字体声明。

不推荐：

  1. border-top-style: none;
  2. font-family: palatino, georgia, serif;
  3. font-size: 100%; 
  4. line-height: 1.6; 
  5. padding-bottom: 2em; 
  6. padding-left: 1em; 
  7. padding-right: 1em; 
  8. padding-top: 0;

推荐：

  1. border-top: 0; 
  2. font: 100%/1.6 palatino, georgia, serif; 
  3. padding: 0 1em 2em;

0和单位

去掉 0 值后面的单位。

不推荐：

  1. margin: 0em; 
  2. padding: 0px;

推荐：

  1. margin: 0; 
  2. padding: 0;

前导零

为方便阅读，十进制值中含有前导零。

不推荐：

font-size: .8em;

推荐：

font-size: 0.8em;

十六进制表示法

在可行时，使用三个十六进制表示法的字符。

不推荐：

color: # eebbcc;

推荐：

color: # ebc;

ID 和类名称分隔符

用连字符分隔 ID 和类名称中的字词（-）。

用连字符连接选择符中的词语和缩略词，以方便理解和扫描。

唯一的例外：在编写 BEM 样式 CSS 选择符时也可以使用下划线（_）。

不推荐：

  1. .demoimage { 
  2.     … 
  3. } 
  5. .errorStatus {
  6.      …
  7. }

推荐：

  1. .demo-image { 
  2.     … 
  3. } 
  5. .error-status { 
  6.     … 
  7. }

Hack

避免用户代理检测或 CSS Hack ——尝试另一种方法。

人们可能很想处理用户代理检测或特殊的 CSS 过滤器以及应变方案和非法入侵之间的样式差异。这两项措施均为实现和维护有效和可处理的代码库的最后方案。请考虑该样式是否对应用的性能至关重要，需要该样式的用户代理是否可以不采样该样式。